<template>
	<view>
		<uni-file-picker :limit="limit" :del-icon="false" disable-preview file-mediatype="image"
			:imageStyles="imageStyles||{width: 64,height: 64}" :auto-upload="false" @select="getFile">
			<ImageBoxVue :src="src" v-if="src"></ImageBoxVue>
			<view v-else>
				<slot>
					<ImageBoxVue src="/static/icons/camera.png" width="48rpx" height="48rpx"></ImageBoxVue>
				</slot>
			</view>
		</uni-file-picker>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import indexApi from '../apis/apiList/indexApi';

	const {
		src,
		limit,
		imgKey,
		imageStyles
	} = defineProps({
		src: String,
		imgKey: String,
		imageStyles: {},
		limit: {
			type: Number,
			default: 1
		}
	})
	const emit = defineEmits(['getUrl'])
	const getFile = (val) => {
		const params = {
			filePath: val.tempFilePaths[0],
			name: 'file',
		}
		indexApi.upLoadImage(params).then(res => {
			if (imgKey) emit('getUrl', imgKey, res.data.url)
			else emit('getUrl', res.data.url)
		})
	}
</script>

<style>

</style>